<template>
  <el-container class="index">
    <el-header>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="paper">试卷</el-menu-item>
        <el-menu-item index="section">板块</el-menu-item>
        <el-menu-item index="question">题目</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import EventBus from '@/service/event'
import {LocalService} from '@/service/api'

export default {
  data: function () {
    return {
      activeIndex: LocalService.GetIndexPath()
    }
  },
  mounted: function () {
    EventBus.$on('acticePath', (path) => {
      LocalService.SaveIndexPath(path)
      this.activeIndex = path
    })
  },
  methods: {
    handleSelect: function (key, keyPath) {
      switch (key) {
        case 'home':
          this.$router.push({path: '/home'})
          break
        default:
          this.$router.push({path: key})
      }
    }
  }
}
</script>

<style scoped>
  .index {
    display: flex;
    display: -webkit-flex; /* Safari */
    min-height: 82vh;
    flex-direction: column;
  }

  .address ul li {
    font-size: 1.1em;
    display: inline-block;
    width: 33%;
    text-align: center;
    color: #fff;
  }

  .copy-right p {
    color: #fff;
    text-align: center;
    margin-top: 2em;
    padding-top: 2em;
    border-top: 2px solid #9d9d9d;
  }

  .address ul li a {
    color: #fff;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transition: .5s all;
  }
</style>
